<template>
  <div class="file-detail-content">
    <div class="left-content">
      <div class="back-page" @click="emit('back')">
        <Icon type="md-arrow-back" />

        <span>文件详情</span>
      </div>

      <template v-if="detailInfo">
        <div class="file-nav">
          <span>{{ detailInfo.title }}</span>

          <div class="btns">
            <!-- <Button>调整训练参数</Button> -->
            <Button @click="editForm()">插入</Button>
          </div>
        </div>

        <div class="search-box">
          <div class="name">
            <Icon type="ios-list" size="18" />
            <span>{{indexGather.length}}组数据, 0组索引</span>
          </div>

          <Input
            v-model="searchValue"
            class="search-input"
            clearable
            search
            prefix="ios-search-outline"
            placeholder="输入关键词搜索"
          />
        </div>

        <ul class="data-list">
          <li v-for="(item,index) in indexGather" :key="index" v-show="!searchValue || item.content.includes(searchValue) || (item.answer && item.answer.includes(searchValue))">
            <p v-if="item.answer" :class="{along: !item.content}">{{item.answer}}</p>

            <p v-if="item.content" :class="{along: !item.answer}">{{item.content}}</p>

            <div class="mask" @click="editForm(item)">
              <div class="control-btns">
                <Icon type="ios-trash" @click.stop="delQa(item.id)" />
              </div>
            </div>
          </li>
        </ul>
      </template>

      <!-- <p v-if="!sliceFindallList.length && !loading" class="no-thing">暂无切片~</p> -->
    </div>

    <div class="right-content">
      <div class="name">元数据</div>

      <div v-for="item in DETAIL_OPTIONS" :key="item.value" class="row-info">
        <span class="label">{{ item.label }}</span>

        <span class="content">{{ item.resolver ? item.resolver(detailInfo[item.value]) : detailInfo[item.value] }}</span>
      </div>

      <Button @click="downFile">查看原始内容</Button>
    </div>

    <EditDialog
      ref="editDialogRef"
      v-if="editDialogDisplay"
      :tableId="tableId"
      @cancel="editDialogDisplay = false"
      @submit="handleDialogSubmit"
    />
  </div>
</template>

<script setup>
import { onMounted, ref, inject, nextTick, getCurrentInstance } from 'vue'
import { Message } from 'view-ui-plus'
import moment from 'moment'
import { resolveBlob } from '@/util'
import { fileContent } from '@/api/modules/knowledgeBase'
import EditDialog from './EditDialog.vue'

const emit = defineEmits(['cancel', 'submit', 'back'])

const props = defineProps({
  details: Object
})
const getTypeId = inject('getTypeId')
const { proxy } = getCurrentInstance()
const DETAIL_OPTIONS = [
  { label: '集合ID', value: 'attid' },
  { label: '数据来源', value: 'filetype' },
  { label: '数据集名称', value: 'ainame' },
  { label: '来源大小', value: 'filesize' },
  { label: '创建时间', value: 'createtime', resolver: (val) => moment(val).format('YYYY-MM-DD HH:mm:ss') },
  { label: '更新时间', value: 'updatetime', resolver: (val) => moment(val).format('YYYY-MM-DD HH:mm:ss') },
  { label: 'PDF增强解析', value: 'analysisplus', resolver: (val) => val ? 'Yes' : 'No' },
  { label: '原文长度', value: 'textlength' },
  { label: '处理模式', value: 'kbprocmode' },
  { label: '图片索引', value: 'j' },
  { label: '自动生成补充索引', value: 'k' },
  { label: '分块大小', value: 'parsechartlength' },
  { label: '索引大小', value: 'parseindexlength' },
]
// 是否打开弹窗
const visible = ref(true)

// 加载状态
const loading = ref(false)

let tableId = ref(null)
const editDialogDisplay = ref(false)
const editDialogRef = ref(null)

const searchValue = ref('')

const handleDialogSubmit = () => {
  editDialogDisplay.value = false
  getData()
}

const detailInfo = ref({})
const indexGather = ref([])
const getData = () => {
  loading.value = true

  fileContent
    .fileDetail({
      data: {
        attid: tableId.value,
        serviceid: getTypeId()
      }
    })
    .then(({ data }) => {
      detailInfo.value = data
      indexGather.value = data.knowledgeSlices || []
    })
    .finally(() => {
      loading.value = false
    })
}


const getQaData = () => {
  fileContent
    .detail({
      data: {
        id: tableId
      }
    })
    .then(({ data }) => {
      indexGather.value = data?.indexList || []
    })
}

const downFile = () => {
  fileContent.download({
    data: {
      attid: detailInfo.value.attid
    }
  }).then(data=>{
    resolveBlob(data)
  })
}

const editForm = (data) => {
  editDialogDisplay.value = true
  nextTick(() => {
    editDialogRef.value.initData(data)
  })
}

const delQa = (id) => {
  proxy.$Modal.confirm({
    mask: false,
    title: '警告',
    content: '<p>是否删除该数据?</p>',
    okText: '确认',
    cancelText: '取消',
    onOk: async () => {
      await fileContent.delete({
        data: {
          id
        }
      })
      Message.success('删除成功')
      getData()
    }
  })
}

/**
 * 提交表单
 */
const submit = async () => {
  let valid = await formEl.value.validate()
  if (!valid) return

  loading.value = true

  try {
    // await myKnowledge.fileedit({
    //   data: {
    //     kbtag: tagList.value.toString(),
    //     id: tableId
    //   }
    // })

    Message.success('操作成功')
    emit('submit')
  } catch (error) {
    console.error(error)
  }

  loading.value = false
}

/**
 * 取消表单
 */
const cancel = () => {
  emit('cancel')
}

const initData = (data = {}) => {
  console.log(data)
  tableId.value = data.id
  visible.value = true

  getData()
  // getQaData()
}

defineExpose({
  initData
})
</script>

<style scoped lang="scss">
@import '@/assets/styles/mixin.scss';

.out-box {
  height: calc(100vh - 276px);
  overflow-y: auto;
  margin-bottom: 16px;
}

.file-detail-content {
  display: flex;
  .left-content {
    background-color: #fff;
    padding: 10px 20px;
    flex: 1;
    border-radius: 4px;
    .back-page {
      font-size: 18px;
      display: flex;
      align-items: center;
      width: fit-content;
      padding: 4px 8px;
      transition: all 0.2s;
      border-radius: 8px;
      transform: translateX(-8px);
      cursor: pointer;
      &:hover {
        background-color: #f3f3f4;
      }
      .ivu-icon-md-arrow-back {
        border: 1px solid #ebedf2;
        border-radius: 50%;
        padding: 2px;
        color: #8d93a2;
      }
      > span {
        margin-left: 8px;
      }
    }

    .file-nav {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 12px 0;
      border-bottom: 1px solid #eee;
      color: #000;
      font-size: 16px;
      .btns {
        .ivu-btn {
          &:nth-child(n + 2) {
            margin-left: 8px;
          }
        }
      }
    }

    .search-box {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .name {
        color: #667085;
        margin: 16px 0;
        > span {
          margin-left: 4px;
        }
      }
      .search-input {
        width: 240px;
        > :deep(.ivu-icon-ios-search) {
          display: none;
        }
      }
    }

    .data-list {
      height: calc(100vh - 270px);
      overflow-y: auto;
      padding: 8px 0;
      li {
        padding: 12px;
        border-radius: 8px;
        background-color: #f0f4fe;
        border: 1px solid #e8ebef;
        cursor: pointer;
        position: relative;
        &:nth-child(2n) {
          background-color: #f7f8fa;
          &:hover {
            background-color: #e8ebef;
          }
        }
        &:nth-child(n + 2) {
          margin-top: 8px;
        }
        &:hover {
          background-color: #e2eafd;
          .mask {
            display: block;
          }
        }
        
        p {
          padding-bottom: 16px;
          border-bottom: 1px solid #ebeff6;

          &:nth-child(2) {
            padding-bottom: 0;
            padding-top: 16px;
            border-bottom: none;
          }
          &.along {
            padding-bottom: 0;
            padding-top: 0;
            border-bottom: none;
          }
        }

        .mask {
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          cursor: pointer;
          display: none;
          .control-btns {
            position: absolute;
            right: 0;
            bottom: 8px;
            display: flex;
            align-items: center;
            .ivu-icon {
              color: #4a5262;
              font-size: 18px;
              margin: 0 8px;
              padding: 4px;
              background-color: #fff;
              border-radius: 8px;
              border: 1px solid #eee;
              cursor: pointer;
              transition: all 0.2s;
              &:hover {
                opacity: 0.8;
              }
            }
          }

        }
      }
    }

    .no-thing {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      color: #999;
      font-size: 16px;
    }
  }
  .right-content {
    background-color: #fff;
    width: 320px;
    margin: 0 8px;
    border-radius: 4px;
    padding: 24px;
    .name {
      font-size: 16px;
      margin-bottom: 16px;
    }

    .row-info {
      margin-bottom: 12px;
      color: #667085;
      display: flex;
      .label {
        width: 90px;
      }
      .content {
        flex: 1;
        word-break: break-all;
      }
    }
  }
}
</style>
